<template>
  <div>
    <Card title="查看品牌" :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="brandForm"
        :model="brandFormData"
        :rules="brandFormRules"
        :label-width="140"
      >
        <Row>
          <Col span="18" offset="3">
            <FormItem label="品牌名称：" prop="brandName">
              <span>{{ brandFormData.brandName }}</span>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="品牌英文名称：" prop="brandEnName">
              <span>{{ brandFormData.brandEnName }}</span>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="厂家品牌中文名：" prop="factoryBrandName">
              <span>{{ brandFormData.factoryBrandName }}</span>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="厂家品牌英文名：" prop="factoryBrandEnName">
              <span>{{ brandFormData.factoryBrandEnName }}</span>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="档次定位(内部)：">
              <Select
                disabled
                v-model="brandFormData.insideLevel"
                style="width: 200px"
              >
                <Option
                  v-for="(item, index) in levelMap"
                  :value="item.value"
                  :key="index"
                  >{{ item.label }}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="档次定位(外部)：">
              <Select
                disabled
                v-model="brandFormData.outsideLevel"
                style="width: 200px"
              >
                <Option
                  disabled
                  v-for="(item, index) in levelMap"
                  :value="item.value"
                  :key="index"
                  >{{ item.label }}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="系列：">
              <span>{{ brandFormData.series }}</span>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="主品牌：">
              <span>{{ brandFormData.parentName }}</span>
              <!-- <template v-for="(item,index) in allBrandData">
                            <span v-if="brandFormData.parentUuid == item.uuid" :key="index">{{ item.brandName }}</span>
                        </template> -->
            </FormItem>
            <FormItem label="状态：">
              <RadioGroup v-model="brandFormData.brandState">
                <Radio label="1" disabled>启用</Radio>
                <Radio label="2" disabled>禁用</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="厂家品牌影响力是否大于商品品牌：">
              <RadioGroup v-model="brandFormData.factoryInfluenceMore">
                <Radio label="1" disabled>是</Radio>
                <Radio label="2" disabled>否</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="长方形图：" prop="imageKey2">
              <Upload
                class="ivu-mr qw-disflex"
                :defaultList="brandImageKey2"
                :mr="16"
                :maxSize="2048"
                :maxLen="1"
                :format="['jpg', 'jpeg', 'png']"
                @handleChangeImage="changeImageKey2"
              ></Upload>
              <p>提示: 上传图片大小不能超过2048K,尺寸750px*360px</p>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="正方形图：" prop="imageKey2">
              <Upload
                class="ivu-mr qw-disflex"
                :defaultList="brandImageKey1"
                :mr="16"
                :maxSize="2048"
                :maxLen="1"
                :format="['jpg', 'jpeg', 'png']"
                @handleChangeImage="changeImageKey1"
              ></Upload>
              <p>提示: 上传图片大小不能超过2048K,尺寸100px*100px，比例1:1</p>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="厂家Logo：" prop="factoryLogo">
              <Upload
                class="ivu-mr qw-disflex"
                :defaultList="brandImageKey3"
                :mr="16"
                :maxSize="2048"
                :maxLen="1"
                :format="['jpg', 'jpeg', 'png']"
                @handleChangeImage="changeImageKey3"
              ></Upload>
              <p>提示: 上传图片大小不能超过2048K,尺寸100px*100px，比例1:1</p>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="品牌描述：">
              <span>{{ brandFormData.note }}</span>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="原因：">
              <span>{{ brandFormData.auditNote }}</span>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem>
              <Button type="default" @click="goBack" class="ivu-ml-8"
                >返回</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import brandUpdata from './configjs/brandUpdata';
import Upload from '@/components/common/upload'; // 上传组件
export default {
  components: { Upload },
  mixins: [brandUpdata],
  data () {
    return {
      allBrandData: [],
      isLoading: false,
      isLoading1: false,
      requestApi: {
        // 视情况自定义
        // 获取编辑页面数据
        getEditPageInfo: {
          url: '/sysback/productbrand/productbrandaudit/baseGetByUuid', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 获取所有品牌
        getAllProductBrands: {
          url: '/sysback/productbrand/productbrand/getAllProductBrands', // 接口地址
          type: 'post' // 接口请求类型
        }
      },
      levelMap: [
        {
          value: '1',
          label: '高'
        },
        {
          value: '2',
          label: '中高'
        },
        {
          value: '3',
          label: '中'
        },
        {
          value: '4',
          label: '中低'
        },
        {
          value: '5',
          label: '低'
        }
      ]
    };
  },
  created () {
    // this.getAllProductBrands();
    this.getBrandInfo();
  },
  methods: {
    // 开始请求所有品牌信息
    getAllProductBrands () {
      // this.isLoading = true;
      ApiRequest(
        this.requestApi.getAllProductBrands.url,
        this.requestApi.getAllProductBrands.type,
        {},
        false
      ).then(res => {
        if (res.retStatus === '1') {
          this.allBrandData = res.retData ? res.retData : [];
        }
        // this.isLoading = false;
      });
    },
    // 返回
    goBack () {
      this.$router.go(-1);
    },
    getBrandInfo () {
      this.isLoading = true;
      let data = {
        uuid: this.uuid
      };
      ApiRequest(
        this.requestApi.getEditPageInfo.url,
        this.requestApi.getEditPageInfo.type,
        data,
        true
      ).then(res => {
        if (res.retStatus === '1') {
          if (res.retData !== '') {
            let rData = res.retData;
            this.brandFormData = {
              brandName: rData.brandName,
              brandEnName: rData.brandEnName,
              note: rData.note,
              insideLevel: rData.insideLevel,
              outsideLevel: rData.outsideLevel,
              series: rData.series,
              parentUuid: rData.parentUuid,
              brandState: rData.brandState,
              factoryInfluenceMore: rData.factoryInfluenceMore,
              factoryBrandName: rData.factoryBrandName,
              factoryBrandEnName: rData.factoryBrandEnName,
              imageKey1: rData.imageKey1,
              imageKey2: rData.imageKey2,
              factoryLogo: rData.factoryLogo,
              auditState: rData.auditState, // 审核状态
              parentName: rData.parentName,
              auditNote: rData.auditNote
            };
            this.resetBrandFormData = JSON.parse(
              JSON.stringify(this.brandFormData)
            );
            if (rData.imageKey1 && rData.imageKey1 !== '') {
              this.brandImageKey1.push({
                url: '/' + rData.imageKey1,
                name: '' // 图片/视频名称
              });
            }
            if (rData.imageKey2 && rData.imageKey2 !== '') {
              this.brandImageKey2.push({
                url: '/' + rData.imageKey2,
                name: '' // 图片/视频名称
              });
            }
            if (rData.factoryLogo && rData.factoryLogo !== '') {
              this.brandImageKey3.push({
                url: '/' + rData.factoryLogo,
                name: '' // 图片/视频名称
              });
            }
          }
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.qw-disflex /deep/.ivu-icon-ios-trash-outline {
  display: none;
}
.qw-disflex /deep/.ivu-icon-ios-eye-outline {
  margin-right: 2px !important;
}
</style>
